  <!-- Main content -->
  <div class="main-content">

    <!-- Top navbar -->
    <nav class="navbar navbar-top navbar-expand-md navbar-dark" id="navbar-main">
      <div class="container-fluid">
        <!-- Brand -->
        <a class="h4 mb-0 text-white text-uppercase d-none d-lg-inline-block" href="./index.html">仪表板</a>
        <!-- Form -->
        <form class="navbar-search navbar-search-dark form-inline mr-3 d-none d-md-flex ml-lg-auto">
          <div class="form-group mb-0">
            <div class="input-group input-group-alternative">
              <div class="input-group-prepend">
                <span class="input-group-text"><i class="fas fa-search"></i></span>
              </div>
              <input class="form-control" placeholder="Search" type="text">
            </div>
          </div>
        </form>
        <!-- User -->
        {% include 'includes/user-dropdown.html' %}
        
      </div>
    </nav>

    <!-- Header -->
    {% include 'includes/top-stats_3.html' %}

    <!-- Page content -->
    <div class="container-fluid mt--7">

      <div class="row">
        <div class="col-xl-8 mb-5 mb-xl-0">
          <div class="card shadow">
              <form method="POST" action="/jiaohu_1#jiaohu_1">

                        <div class="card-header bg-transparent" id="jiaohu_1">
                        宽: <input class="btn btn-outline-secondary dropdown-toggle" type="text" name="width" placeholder="800px"/>
                        高: <input class="btn btn-outline-secondary dropdown-toggle" type="text" name="height" placeholder="500px"/>
{#                        <select name="the_region_selected" class="btn btn-outline-secondary dropdown-toggle">#}
{#                            {% for item in the_select_region %}#}
{#                                <option value="{{ item }}">{{ item }}</option>#}
{#                            {% endfor %}#}
{#                        </select>&ensp;#}
                        <input value='更改大小' type='SUBMIT' name="jiaohu_selected_1" class="btn btn-info">
                         </div>
                </form>
            <div class="card-body">

{#              <!-- Chart -->#}
              <div style="height: 100%;width: 100%">
                  {{ jiaohu_t1|safe }}
{#                <!-- Chart wrapper -->#}
{#                <canvas id="chart-sales" class="chart-canvas"></canvas>#}
              </div>
            </div>
          </div>

        </div>
          <div class="col-xl-4">
          <div class="card shadow">
            <div class="card-header bg-transparent">
              <div class="row align-items-center">
                <div class="col">
                  <h2 class="mb-0">历年来世界生育率变化趋势</h2>
                    <h6 class="text-uppercase text-muted ls-1 mb-1">输入相应宽高的值可以改变图表的大小</h6>
                </div>
              </div>
            </div>
            <div class="card-body">
              <!-- Chart -->
              <div class="pre-scrollable" style="height: 850px; margin-top: -2px;">
                  <div class="table-responsive">{{ jiaohu_b1|safe }}</div>
              </div>
              </div>
            </div>
          </div>
        </div>

         <div class="row mt-4">
        <div class="col-xl-8 mb-5 mb-xl-0">
          <div class="card shadow">
              <form method="POST" action="/jiaohu_1#jiaohu_2">

                        <div class="card-header bg-transparent " id="jiaohu_2">
                        <select name="jiaohu_selected_2" class="btn btn-outline-secondary dropdown-toggle">
                            {% for item in jiaohu_selected_2 %}
                                <option value="{{ item }}">{{ item }}</option>
                            {% endfor %}
                        </select>&ensp;
                        <input value='确定' type='SUBMIT' class="btn btn-info">
                         </div>
                </form>
            <div class="card-body">

{#              <!-- Chart -->#}
              <div style="height: 100%;width: 100%">
                  {{ jiaohu_t2|safe }}
{#                <!-- Chart wrapper -->#}
{#                <canvas id="chart-sales" class="chart-canvas"></canvas>#}
              </div>
            </div>
          </div>

        </div>
        <div class="col-xl-4">
          <div class="card shadow">
            <div class="card-header bg-transparent">
              <div class="row align-items-center">
                <div class="col">
                  <h6 class="text-uppercase text-muted ls-1 mb-1">各国历年生育率趋势</h6>
                  <h2 class="mb-0">选择想了解的国家进行探索</h2>
                </div>
              </div>
            </div>
            <div class="card-body">
              <!-- Chart -->
              <div class="pre-scrollable" style="height: 600px; margin-top: -2px;">
                  <div class="table-responsive">{{ jiaohu_b2|safe }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

    <div class="row mt-4">
        <div class="col-xl-8 mb-5 mb-xl-0 container">
          <div class="card shadow">


              <div class="card-header bg-transparent" id="jiaohu_3">
                  <form method='POST' action='/jiaohu_1#jiaohu_3'><p><input name='jiaohu_selected_3' class="btn btn-info" value='切换' type='submit'></p></form>

              </div>
            <div class="card-body">

{#              <!-- Chart -->#}
              <div style="height: 100%;width: 100%">
                  {{ jiaohu_t3|safe }}
{#                <!-- Chart wrapper -->#}
{#                <canvas id="chart-sales" class="chart-canvas"></canvas>#}
              </div>
            </div>
          </div>

        </div>
      </div>
      </div>
        {% include 'includes/footer.html' %}

      </div>






